<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Boris Vargas - Diseñador Grafico y Web Freelance</title>
<link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css' />
<link href="estilos.css" rel="stylesheet" type="text/css" />
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!-- slider -->
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
<!--
<script type="text/javascript" src="js/jquery.js"></script>
-->
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="fancybox/jquery.fancybox.js"  ></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css" media="screen" />
<!-- The JavaScript -->
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
			$(function() {
		   		$("#slider").easySlider({
				controlsShow: true,
				continuous: true,
				auto: true
			});
		   
                $('ul.navi a').bind('click',function(event){
                    var $anchor = $(this);
                    
                    $('html, body').stop().animate({
                        scrollTop: $($anchor.attr('href')).offset().top+0
                    }, 1500,'easeInOutExpo');
                    /*
                    if you don't want to use the easing effects:
                    $('html, body').stop().animate({
                        scrollTop: $($anchor.attr('href')).offset().top
                    }, 1000);
                    */
                    event.preventDefault();
                });
				
				$('div#final a').bind('click',function(event){
                    var $anchor = $(this);
                    
                    $('html, body').stop().animate({
                        scrollTop: $($anchor.attr('href')).offset().top+0
                    }, 1500,'easeInOutExpo');
                    /*
                    if you don't want to use the easing effects:
                    $('html, body').stop().animate({
                        scrollTop: $($anchor.attr('href')).offset().top
                    }, 1000);
                    */
                    event.preventDefault();
                });
				
				$('.fancybox').fancybox();

			/*
				Different effects
			*/

			// Change title type, overlay opening speed and opacity
			$(".fancybox-effects-a").fancybox({
				helpers: {
					title : {
						type : 'outside'
					},
					overlay : {
						speedIn : 500,
						opacity : 0.95
					}
				}
			});

			// Disable opening and closing animations, change title type
			$(".fancybox-effects-b").fancybox({
				openEffect  : 'none',
				closeEffect	: 'none',

				helpers : {
					title : {
						type : 'over'
					}
				}
			});

			// Set custom style, close if clicked, change title type and overlay color
			$(".fancybox-effects-c").fancybox({
				wrapCSS    : 'fancybox-custom',
				closeClick : true,

				helpers : {
					title : {
						type : 'inside'
					},
					overlay : {
						css : {
							'background-color' : '#eee'	
						}
					}
				}
			});

			// Remove padding, set opening and closing animations, close if clicked and disable overlay
			$(".fancybox-effects-d").fancybox({
				padding: 0,

				openEffect : 'elastic',
				openSpeed  : 150,

				closeEffect : 'elastic',
				closeSpeed  : 150,

				closeClick : true,

				helpers : {
					overlay : null
				}
			});

			/*
				Button helper. Disable animations, hide close button, change title type and content
			*/

			$('.fancybox-buttons').fancybox({
				openEffect  : 'none',
				closeEffect : 'none',

				prevEffect : 'none',
				nextEffect : 'none',

				closeBtn  : false,

				helpers : {
					title : {
						type : 'inside'
					},
					buttons	: {}
				},

				afterLoad : function() {
					this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
				}
			});


			/*
				Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
			*/

			$('.fancybox-thumbs').fancybox({
				prevEffect : 'none',
				nextEffect : 'none',

				closeBtn  : false,
				arrows    : false,
				nextClick : true,

				helpers : { 
					thumbs : {
						width  : 50,
						height : 50
					}
				}
			});


			/*
				Open manually
			*/

			$("#fancybox-manual-a").click(function() {
				$.fancybox.open('1_b.jpg');
			});

			$("#fancybox-manual-b").click(function() {
				$.fancybox.open({
					href : 'iframe.html',
					type : 'iframe',
					padding : 5
				});
			});

			$("#fancybox-manual-c").click(function() {
				$.fancybox.open([
					{
						href : '1_b.jpg',
						title : 'My title'
					}, {
						href : '2_b.jpg',
						title : '2nd title'
					}, {
						href : '3_b.jpg'
					}
				], {
					helpers : {
						thumbs : {
							width: 75,
							height: 50	
						}
					}	
				});
			});

				
            });
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body onload="MM_preloadImages('imagenes/facea.png','imagenes/twitter1a.png','imagenes/behance1a.png','imagenes/googlemasa.png','imagenes/downloada.png','imagenes/linkedin1.png','imagenes/small_absurda.jpg','imagenes/small_absurda1a.jpg','imagenes/small_nagaia.jpg','imagenes/small_seasona.jpg','imagenes/small_muzzapizzaa.jpg','imagenes/small_irglovaa.jpg','imagenes/small_cyberpunka.jpg','imagenes/small_vipa.jpg')">
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="pagina">
  <div id="cabecera">
    <div id="menu">
      <ul class="navi">
        <li><a href="#inicio">HOME</a></li>
        <li><a href="#about">SOBRE MI</a></li>
        <li><a href="#work">PORTFOLIO</a></li>
        <li><a href="#pie">CONTACTO</a></li>
      </ul>
    </div>
  </div>
  <div id="cuerpo">
    <div id="inicio">
      <div id="maintitulo"><img src="imagenes/titulo1.png" /></div>
      <div id="me">
        <div id="welcome">BIENVENIDO</div>
        <div id="welcometex">
          <p>Me llamo Boris Vargas y soy un diseñador grafico y web freelance trabajando y viviendo en Buenos Aires, Argentina.</p>
          <p> OFRESCO EL DESARROLLO DE WEBS PROFESIONALES Y TODO TIPO DE PIEZAS GRAFICAS DE ALTO NIVEL Y CALIDAD.</p>
        </div>
      </div>
      <div id="me2">
        <div id="container">
          <div id="content">
            <!-- slider -->
            <div id="slider">
              <ul>
                <li><a><img src="imagenes/01.png" alt="Css Template Preview" /></a></li>
                <li><a><img src="imagenes/02.png" alt="Css Template Preview" /></a></li>
                <li><a><img src="imagenes/03.png" alt="Css Template Preview" /></a></li>
                <li><a><img src="imagenes/04.png" alt="Css Template Preview" /></a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="about">
      <div id="titleabout"><img src="imagenes/about.png" /></div>
      <div id="foto"><img src="imagenes/foto1.png" /></div>
      <div id="info">
        <div id="aboutmain">
          <div id="titulo">Esbozo de mi ser</div>
          <div id="textoabout">Siempre he tenido un profundo cariño por el dibujo, la animacion y el proceso de creacion de todo tipo de formas, desde niño mi pasion por el dibujo y la creacion artistica me llevaron a explorar nuevos horizontes como el Diseño Gráfico. Hasta hoy, nunca deje de lado el lapiz y el papel y estoy obsesionado con obtener los mejores resultados en todo tipo de proceso que conlleva la creacion de la buena forma.</div>
        </div>
        <div id="aboutmain">
          <div id="titulo">Me presento de nuevo</div>
          <div id="textoabout">Me llamo Boris Vargas Vasquez, nacido en Buenos Aires, Argentina, Tengo 21 años y estudio Diseño Gráfico en la Universidad de Buenos Aires (UBA) desde el 2009, soy un diseñador web autodidacta desde 2010 y me dedico a diseñar webs de manera freelance, estoy capacitado en varios cursos de Diseño web y manejo de Dreamweaver, se hablar ingles casi fluidamente y el cine y la música son mi pasion.</div>
        </div>
      </div>
      <div id="info2">
        <div id="titulo2">Servicios</div>
        <div id="texto2">
          <p>Ofresco una extensa lista de servicios a continuacion: </p>
          <p><strong>DISEÑO WEB - IDENTIDAD CORPORATIVA DISEÑO EDITORIAL - AFICHISMO - CARTELERIA - TARJETERIA - PACKAGING - ARTE DE DISCO - FOLLETERIA - ILUSTRACION - GIGANTOGRAFIAS - LIBROS - SEÑALETICA - MERCHANDISING ANIMACIÓN Y EDICIÓN DE VIDEO EN AFTER EFFECTS</strong></p>
        </div>
      </div>
      <div id="skillsmain">
        <div id="titleskills">Habilidades</div>
        <div id="skills"><img src="imagenes/skills1.png" /></div>
        <div id="curriculum">
          <div id="download"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Imagen34','','imagenes/downloada.png',1)"><img src="imagenes/download1.png" name="Imagen34" width="39" height="39" border="0" id="Imagen34" /></a></div>
          <div id="downtexto">Download Curriculum Vitae (PDF)</div>
        </div>
      </div>
    </div>
    <div id="work">
      <div id="workconte">
        <div id="titlework"><img src="imagenes/work.png" /></div>
        <div id="workintro">Les presento una seleccion de mi trabajos acontinuación.</div>
      </div>
      <div id="laburos">
        <div id="project1">
          <div class="workfoto"><a href="imagenes/large_fiction.jpg" class="fancybox" title="" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Imagen36','','imagenes/small_fictiona.jpg',1)"><img src="imagenes/small_fiction.jpg" name="Imagen36" width="255" height="180" border="0" id="Imagen36" /></a></div>
          <div class="workinfo">
            <div class="tituworki">Diseño Editorial experimental</div>
            <div class="tituinfi">Diseño Experimental de dobles paginas, creadas para la materia Diseño Grafico II, catedra Pujol, Universidad de Buenos Aires. Si queres ver el proyecto completo,<a href="http://www.behance.net/gallery/Diseno-Editorial-Experimental/3711756" target="_blank">click aca.</a></div>
          </div>
        </div>
        <div id="project2">
          <div class="workfoto"><a href="imagenes/large_absurda.jpg" class="fancybox" title="" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Imagen37','','imagenes/small_absurda1a.jpg',1)"><img src="imagenes/small_absurda1.jpg" name="Imagen37" width="255" height="180" border="0" id="Imagen37" /></a></div>
          <div class="workinfo">
            <div class="tituworki">Tipografia experimental - Absurda Font</div>
            <div class="tituinfi">Diseño Tipografico de una tipografia "rota" con su respectiva presentacion y afiches A3. Diseñado para la materia Tipografia I, catedra Gaitto, Universidad de Buenos Aires. Si queres ver el proyecto completo,<a href="http://www.behance.net/gallery/Diseno-de-una-tipografia-experimental-Absurda-Font/3376707" target="_blank">click aca.</a></div>
          </div>
        </div>
        <div id="project3">
          <div class="workfoto"><a href="imagenes/large_nagai.jpg" class="fancybox" title="" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Imagen38','','imagenes/small_nagaia.jpg',1)"><img src="imagenes/small_nagai.jpg" name="Imagen38" width="255" height="180" border="0" id="Imagen38" /></a></div>
          <div class="workinfo">
            <div class="tituworki">Afichismo - Anime, Mazinger Z - Go Nagai</div>
            <div class="tituinfi">Afiches realizados para la materia Tipografia I, catedra Gaitto, Universidad de Buenos Aires. Si queres ver el proyecto completo,<a href="http://www.behance.net/gallery/Afichismo-Anime-Mazinger-Z-Go-Nagai/3381329" target="_blank">click aca.</a> </div>
          </div>
        </div>
        <div id="project4">
          <div class="workfoto"><a href="imagenes/large_season.jpg" class="fancybox" title="" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Imagen39','','imagenes/small_seasona.jpg',1)"><img src="imagenes/small_season.jpg" name="Imagen39" width="255" height="180" border="0" id="Imagen39" /></a></div>
          <div class="workinfo">
            <div class="tituworki">Diseño Editorial  - The swell season</div>
            <div class="tituinfi">Diseño de dobles paginas acerca de la banda The Swell Season, 3 dobles paginas con una estetica relacionada con la banda folk y a la vez creando un diseño con diferentes gerarquias en sus componentes.
              Los 2 afiches promocionales de la banda. Si queres ver el proyecto completo,<a href="http://www.behance.net/gallery/Diseno-Editorial-y-afichismo-The-swell-season/3376189" target="_blank">click aca.</a> </div>
          </div>
        </div>
        <div id="project5">
          <div class="workfoto"><a href="imagenes/large_muzzapizza.jpg" class="fancybox" title="" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Imagen40','','imagenes/small_muzzapizzaa.jpg',1)"><img src="imagenes/small_muzzapizza.jpg" name="Imagen40" width="255" height="180" border="0" id="Imagen40" /></a></div>
          <div class="workinfo">
            <div class="tituworki">Diseño de identidad corporativa.</div>
            <div class="tituinfi">Este diseño esta compuesto de el logotipo, papeleria empresarial, packaging, folleteria, pictogramas de una empresa de delibery de pizas. Diseñado para la materia Diseño Grafico I, catedra Gonzalez Ruiz, Universidad de Buenos Aires. Si queres ver el proyecto completo,<a href="http://www.behance.net/gallery/Diseno-de-identidad-corporativa-para-una-pizeria/3377367" target="_blank">click aca.</a></div>
          </div>
        </div>
        <div id="project6">
          <div class="workfoto"><a href="imagenes/large_irglova.jpg" class="fancybox" title="" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Imagen41','','imagenes/small_irglovaa.jpg',1)"><img src="imagenes/small_irglova.jpg" name="Imagen41" width="255" height="180" border="0" id="Imagen41" /></a></div>
          <div class="workinfo">
            <div class="tituworki">Diseño Editorial - Marketa Irglova</div>
            <div class="tituinfi">Diseño Experimental de dobles paginas para revista, el articulo es a cerca de la cantante checa Marketa Irglova, ex-miembro de The Swell Season y cantante solista. Se le dio un aspecto relacionado a la musica de la interprete. Si queres ver el proyecto completo,<a href="http://www.behance.net/gallery/Diseno-Editorial-dobles-paginas-Marketa-Irglova/3377029" target="_blank">click aca.</a></div>
          </div>
        </div>
        <div id="project7">
          <div class="workfoto"><a href="imagenes/large_cyberpunk.jpg" class="fancybox" title="" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Imagen42','','imagenes/small_cyberpunka.jpg',1)"><img src="imagenes/small_cyberpunk.jpg" name="Imagen42" width="255" height="180" border="0" id="Imagen42" /></a></div>
          <div class="workinfo">
            <div class="tituworki">Diseño Editorial, Dobles paginas - Cyberpunk </div>
            <div class="tituinfi">Dobles paginas acerca del genero cyberpunk y sus ramificacion en el anime. Si queres ver el proyecto completo,<a href="http://www.behance.net/gallery/Diseno-editorial-Dobles-paginas-Cyberpunk/3369807" target="_blank">click aca.</a></div>
          </div>
        </div>
        <div id="project8">
          <div class="workfoto"><a href="imagenes/large_vip.jpg" class="fancybox" title="" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Imagen43','','imagenes/small_vipa.jpg',1)"><img src="imagenes/small_vip.jpg" name="Imagen43" width="255" height="180" border="0" id="Imagen43" /></a></div>
          <div class="workinfo">
            <div class="tituworki">Identidad visual y afichismo</div>
            <div class="tituinfi">Identidad Visual y diseño de afiche promocional para un evento de musica cristiana de una iglesia.</div>
          </div>
        </div>
        <div id="project9">
          <div class="workfoto"><img src="imagenes/coming.png" /></div>
          <div class="workinfo"></div>
        </div>
        <div id="project10">
          <div class="workfoto"><a href="imagenes/large_ceneri.jpg" class="fancybox" title=""><img src="imagenes/small_ceneri.jpg" /></a></div>
          <div class="workinfo">
            <div class="tituworki">Web ficticia diseñada en grupo</div>
            <div class="tituinfi">Diseño de una pagina web ficticia acerca de todo el universo de las energias renovables, este proyecto fue diseñado para la materia DGPC de la carrera de Diseño grafico (UBA) y diseñado en conjunto con Aldana Ceraolo y Rocio Morono. Si queres ver el proyecto completo,click aca.</a></div>
          </div>
        </div>
        <div id="project11">
          <div class="workfoto"><a href="imagenes/large_belgrano.jpg" class="fancybox" title=""><img src="imagenes/small_belgrano.jpg" /></a></div>
          <div class="workinfo">
            <div class="tituworki">Web para el colegio EES.N°1 Manuel Belgrano</div>
            <div class="tituinfi">Diseño de una pagina web para el colegio secundario E.E.S. N°1 Manuel Belgrano del partido de Moreno. Si queres navegarla,click aca.</div>
          </div>
        </div>
        <div id="project12">
          <div class="workfoto"><a href="imagenes/large_belgrano.jpg" class="fancybox" title=""><img src="imagenes/small_lab.jpg" /></a></div>
          <div class="workinfo">
            <div class="tituworki">Web para el L.I.G. Fiuba (UBA)</div>
            <div class="tituinfi">Diseño de una pagina web para el Laboratorio de Informatica de Gestion de la Facultad de ingenieria, Universidad de Buenos Aires. Si queres navegarla,click aca.</div>
          </div>
        </div>
        <div id="project10">
          <div class="workfoto"><img src="imagenes/coming.png" /></div>
          <div class="workinfo"></div>
        </div>
        <div id="project11">
          <div class="workfoto"><img src="imagenes/coming.png" /></div>
          <div class="workinfo"></div>
        </div>
        <div id="project12">
          <div class="workfoto"><img src="imagenes/coming.png" /></div>
          <div class="workinfo"></div>
        </div>
        <div id="project10">
          <div class="workfoto"><img src="imagenes/coming.png" /></div>
          <div class="workinfo"></div>
        </div>
        <div id="project11">
          <div class="workfoto"><img src="imagenes/coming.png" /></div>
          <div class="workinfo"></div>
        </div>
        <div id="project12">
          <div class="workfoto"><img src="imagenes/coming.png" /></div>
          <div class="workinfo"></div>
        </div>
      </div>
      <div id="laburo1">
        <div id="titleconte">
          <div id="laburotitle">PROCESO DE DISEÑO</div>
        </div>
        <div id="laburotexto">
          <div class="tituloser">CAFE</div>
          <div class="tituloinfo">Antes que nada.</div>
        </div>
        <div id="laburotexto1">
          <div class="tituloser">PLANIFICACIÓN</div>
          <div class="tituloinfo"> Posíblemente la parte más importante del proceso.<br />
            Se recopila toda la información como objetivo y necesidades del cliente, target, elementos necesarios para la producción. Lapiz y papel a mano y concentración al 100%</div>
        </div>
        <div id="laburotexto2">
          <div class="tituloser">DISEÑO</div>
          <div class="tituloinfo"> Aca viene el trabajo arduo para darle sentido y forma a toda la información que ha sido recopilada anteriormente. La música me acompaña en este proceso como siempre.</div>
        </div>
        <div id="laburotexto3">
          <div class="tituloser">LANZAMIENTO</div>
          <div class="tituloinfo"> Después del diseño y su posterior desarrollo, es hora de hacer el lanzamiento de la web para poder acabar de pulir algún pequeño detalle, <em>testear</em>y comprobar que todo funciona a la perfección. </div>
        </div>
      </div>
    </div>
  </div>
  <div id="pie">
    <div id="pieizquierdo">
      <div id="phone"><img src="imagenes/squirrel.png" /></div>
      <div id="like">
        <fb:like href="http://www.facebook.com/BorisVargasDisenadorGraficoYWebFreelance" send="false" layout="box_count" width="500" show_faces="false"></fb:like>
      </div>
    </div>
    <div id="piesuperior">
      <div id="titlecontact"><img src="imagenes/contact.png" /></div>
      <div id="infocontacto">
        <div id="textocon">Si te gusto mi trabajo o si tenes alguna propuesta o idea, no dudes en contactarme ya sea completando el formulario o cantactandome de las otras maneras. Muchas Gracias por pasar.</div>
      </div>
      <div id="formulario">
        <div id="formu">
          <tr>
            <td colspan="5" align="center"><form action="envio.php" method="post" enctype="multipart/form-data" name="form1" id="form1">
                <table width="370" border="0" cellspacing="5" cellpadding="0">
                  <tr>
                    <td align="right">Nombre y Apellido:</td>
                    <td colspan="2" align="left"><label>
                        <input name="nombre" type="text" class="campos" id="nombre" size="30" maxlength="60" />
                      </label></td>
                  </tr>
                  <tr>
                    <td align="right">E-mail:</td>
                    <td colspan="2" align="left"><input name="email" type="text" class="campos" id="email" size="30" maxlength="60" /></td>
                  </tr>
                  <tr>
                    <td align="right" valign="top">Mensaje:</td>
                    <td colspan="2" align="left"><label>
                        <textarea name="comentario" cols="23" rows="5" class="campos" id="comentario"></textarea>
                      </label></td>
                  </tr>
                  <tr>
                    <td align="right">&nbsp;</td>
                    <td align="left"><label>
                        <input name="envio" type="submit" class="campos" id="envio" value="Enviar" />
                      </label></td>
                  </tr>
                  <tr>
                    <td align="right">&nbsp;</td>
                    <td colspan="2" align="left"><input name="recipient" type="hidden" id="recipient" value="mariela.cursos@gmail.com" /></td>
                  </tr>
                </table>
              </form></td>
          </tr>
        </div>
      </div>
      <div id="touch">
        <div id="touchtitulo">Get in touch</div>
        <div id="touchtexto">
          <div id="icons">
            <div id="gmail"><img src="imagenes/envelope.png" /></div>
            <div id="phone1"><img src="imagenes/tel.png" /></div>
            <div id="skype"><img src="imagenes/skype1.png" /></div>
          </div>
          <div id="gmailadress"><strong>Gmail </strong>boris.vargasvasquez@gmail.com</div>
          <div id="telnumber">
            <div><strong>Linea</strong></div>
            (011) 34760905</div>
          <div id="skypeadress">
            <div><strong>Skype</strong></div>
            boris.vargas21</div>
        </div>
      </div>
      <div id="touch1">
        <div id="touchtitulo">Say hello</div>
        <div id="touchtexto">
          <div id="icons">
            <div id="gmail"><a href="http://www.facebook.com/BorisVargasDisenadorGraficoYWebFreelance" target="_blank" onmouseover="MM_swapImage('Imagen24','','imagenes/facea.png',1)" onmouseout="MM_swapImgRestore()"><img src="imagenes/face.png" name="Imagen24" width="39" height="39" border="0" id="Imagen24" /></a></div>
            <div id="phone1"><a href="https://twitter.com/#!/BorisVargas21" target="_blank" onmouseover="MM_swapImage('Imagen25','','imagenes/twitter1a.png',1)" onmouseout="MM_swapImgRestore()"><img src="imagenes/twitter1.png" name="Imagen25" width="39" height="39" border="0" id="Imagen25" /></a></div>
            <div id="skype"><a href="http://www.behance.net/BorisVargas" target="_blank" onmouseover="MM_swapImage('Imagen26','','imagenes/behance1a.png',1)" onmouseout="MM_swapImgRestore()"><img src="imagenes/behance1.png" name="Imagen26" width="39" height="39" border="0" id="Imagen26" /></a></div>
          </div>
          <div id="icons1">
            <div id="gmail"><a href="http://www.google.com" target="_blank" onmouseover="MM_swapImage('Imagen27','','imagenes/googlemasa.png',1)" onmouseout="MM_swapImgRestore()"><img src="imagenes/googlemas.png" name="Imagen27" width="39" height="39" border="0" id="Imagen27" /></a></div>
            <div id="phone1"><a href="http://www.flickr.com/photos/borisvargas/" target="_blank" onmouseover="MM_swapImage('Imagen28','','imagenes/flickra.png',0)" onmouseout="MM_swapImgRestore()"><img src="imagenes/flickr.png" name="Imagen28" width="39" height="39" border="0" id="Imagen28" /></a></div>
            <div id="skype"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Imagen35','','imagenes/linkedin1.png',1)"><img src="imagenes/linkedin.png" name="Imagen35" width="39" height="39" border="0" id="Imagen35" /></a></div>
          </div>
        </div>
      </div>
    </div>
    <div id="pieinferior">
      <div id="credito1">COPYRIGHT © 2012 BORIS VARGAS, TODOS LOS DERECHOS RESERVADOS</div>
      <div id="credito2">MADE WITH LOVE ON A PC IN PHOTOSHOP, ILLUSTRATOR & DREAMWEAVER - FONT:DOSIS PROVIDED BY GOOGLE FONTS - HOSTED BY WIROOS</div>
    </div>
  </div>
  <div id="final"><a href="#inicio">QUE HACES ACA ABAJO? LA WEB ESTA ARRIBA</a></div>
</div>
</body>
</html>
